<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Simple Tween Demo</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<script type="text/javascript" src="../src/tweenjs/plugins/CSSPlugin.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
		 http://code.createjs.com -->

	<style>
		.content {
			position: relative;
		}

		.ball {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 100%;
			border: 3px solid #000;
		}
	</style>

<script id="editable">
	function init() {
		createjs.CSSPlugin.install(createjs.Tween);
		
		var w = window.innerWidth, h = window.innerHeight;
		var ball = document.createElement("div");
		ball.className = "ball";
		document.body.appendChild(ball);
		
		// we need to set the initial values for styles we're going to tween in order to indicate the units ("px" in this case):
		ball.style.left = w*0.1+"px";
		ball.style.top = h*0.1+"px";

		createjs.Tween.get(ball, {loop: -1})
			.to({top: h-110}, 1500, createjs.Ease.bounceOut);
		
		// we'll use a second tween so that we can apply a different ease at the same time:
		createjs.Tween.get(ball, {loop: -1})
			.to({left: w*0.9-100}, 1500, createjs.Ease.getPowOut(1.5));
			
		createjs.Ticker.timingMode = createjs.Ticker.RAF;
	}
</script>

</head>
<body onload="init()">

<div>
	<header class="EaselJS">
		<h1>Tween only Demo</h1>

		<p>This example shows TweenJS without using Canvas/EaselJS, to showcase
			legacy support for IE8.</p>
	</header>
</div>

</body>
</html>
